<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将页面展示区box设置宽高背景 */
#box{    
  background: url("img/22.jpg") no-repeat;  
  width:700px;    height:400px;   
  /* 此处是为了让Box在中间显示 */
  margin:100px auto;
  position: relative;
}
  /* 设定page的位置 */
#box .page{ 
    /* 因为其在展示区右侧，所以宽度为整个box的一般，并定在右侧 */
    width: 50%;    height: 100%; 
    top:0; right:0;
    position: absolute;  
    /* 将开启3d空间，方便翻页后front和back的3d变换 */
    transform-style: preserve-3d; 
    /* 奇点设为左边 */
    transform-origin: left center;
    /* 设置翻书（旋转）的运动时间，运动形式 */   
    transition:1s all ease;  
    /* 提升层级否则会被盖住 */
    z-index:2; 
    /* 设置景深来更好的展示3D效果，并给旋转角度一个初始值，防止抖动发生 */
   transform:perspective(800px) rotateY(0deg);
}
/* 配置旋转页的前页 */
.page .front{    
     /* 宽高与父级page一样 */
     width:100%; height: 100%;   
     position: absolute;  
     left:0; top: 0;
    /* 将背景设成为与前一页相同的背景,并且只要右面的那部分，与页面左部分拼接 */
     background: url("img/22.jpg") right top no-repeat; 
   /* backface-visibility属性和3D transform效果相关，它决定当一个元素的背面面是否可见 */ 
     backface-visibility: hidden;  
   /* 提升层级否则会被盖住 */
     z-index:2;
}
/* 配置旋转页的后页 */
.page .back{   
     /* 宽高与父级page一样 */
    width:100%; height: 100%;
     /* 将背景设成为与下一页相同的背景,并且只要左面的那部分，与右部分的page2拼接 */
    background: url("img/22.jpg") left top no-repeat;    
    position: absolute;
    left:0;    top: 0;    
    /* 这里设置将back进行水平方向上的镜像变化，因为当page旋转180°后， back显示的效果不对*/
    transform: scale(-1,1); 
    /* 改变层级避免盖住其他页面 */  
    z-index:1;
}
/* 配置pages展示区 */
#box .page2{   
   /* 因为其只在页面右侧展示所以宽为Box的一半 */ 
    width: 50%;height: 100%;  
    top:0;right:0;   
    position: absolute;
    /* 将背景设成为与下一页相同的背景,并且只要右面的那部分，与左部分（.page .back）拼接 */  
   background: url("img/22.jpg") right top no-repeat;
    /* 改变层级避免盖住其他页面 */   
   z-index:1;
}
    </style>
</head>
<body>
    <!-- /* box为整个页面展示区 */ -->
<div id="box">  
    <!-- /* page有前后两面 */ -->
   <div class="page">   
      <div class="front"></div>
      <div class="back"></div>  
  </div>   
  <!-- /* page2为翻页之后显示的*/  -->
<div class="page2"></div>
</div>
<script>
    var oBox = document.getElementById('box');
var oPage  = document.querySelector('.page');
oBox.onclick = function(){   
   oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
};
</script>
</body>
</html>